<template>
  <d2-container>
    <!-- <el-aside width="20%" class="left">
      <div class="left_today">
        <h4 style="text-align:center;">进入进件数据</h4>
        <el-row v-for="(item,index) in todays" v-bind:key="index">
          <el-col :span="18"><div class="grid-content bg-purple">{{item.name}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">{{item.value}}</div></el-col>
        </el-row>
      </div>
       <div class="left_interface">
          <h4 style="text-align:center;">接口监控数据</h4>
         <el-row v-for="(item,index) in interfaces" v-bind:key="index">
          <el-col :span="18"><div class="grid-content bg-purple">{{item.name}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">{{item.value}}</div></el-col>
        </el-row>
      </div>
    </el-aside>
    <el-main class="echarts">
        <div class="main">
          <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
        </div>
        <div class="footer">
          <div :style="{height:'400px',width:'100%'}" ref="pfUser"></div>
        </div>
         <div class="footer">
          <div :style="{height:'400px',width:'100%'}" ref="specificIndex"></div>
        </div> 
    </el-main> -->
    <!-- <el-aside width="20%" class="right">
         <div class="right_alarm">
          <h4 style="text-align:center;">当前告警</h4>
          <el-row >
            <el-col :span="8"><div class="grid-content bg-purple">事件</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">类型</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">级别</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">操作</div></el-col>
          </el-row>
         <ul class="infinite-list" v-infinite-scroll="load"  style="overflow:auto">
          <li v-for="(item,index) in alarms" v-bind:key="index" class="infinite-list-item">
            <el-row >
              <el-col :span="18"><div class="grid-content bg-purple">{{item.name}}</div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light">{{item.value}}</div></el-col>
             </el-row>
          </li>
        </ul>
      </div>
    </el-aside> -->
  </d2-container>
</template>

<script>
import echarts from "echarts";
import china from "./../../../map/china.json";
export default {
  data() {
    return {
      chart: null,
      todays:[{name:"评分用户数",value:"12,000"},
      {name:"准入进件数",value:"12,000"},
      {name:"准入拒绝数",value:"2,000"},
      {name:"反欺诈进件数",value:"12,000"},
      {name:"反欺诈拒绝数",value:"1,000"}
      ],
      interfaces:[{name:"实名OCR数",value:"12,000"},
      {name:"手持认证数",value:"12,000"},
      {name:"同盾接口执行数 ",value:"2,000"},
      {name:"同盾缺失数",value:"1,000"},
      {name:"智策接口执行数 ",value:"1,000"},
      {name:"智策缺失数 ",value:"1,000"},
      {name:"群星接口执行数 ",value:"1,000"},
      {name:"群星接口缺失数  ",value:"1,000"}
      ],
      alarms:[{name:"实名OCR数",value:"12,000"},
      {name:"手持认证数",value:"12,000"},
      {name:"同盾接口执行数 ",value:"2,000"},
      {name:"同盾缺失数",value:"1,000"},
      {name:"智策接口执行数 ",value:"1,000"},
      {name:"智策缺失数 ",value:"1,000"},
      {name:"群星接口执行数 ",value:"1,000"},
      {name:"群星接口缺失数  ",value:"1,000"}]
    };
  },
  mounted() {
    // this.chinaConfigure();
    // this.scoringUser();
    //this.specificIndex();
  },
  beforeDestroy() {
    console.log(" ==================== beforeDestroy ================= ");
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      //window.onresize = myChart.resize;
      echarts.registerMap("china", china);
      myChart.setOption({
        // 进行相关配置
        backgroundColor: "#02AFDB",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "lightskyblue"]
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)"
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo" // 对应上方配置
          },
          {
            name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "北京",
                value: 599
              },
              {
                name: "上海",
                value: 142
              },
              {
                name: "黑龙江",
                value: 44
              },
              {
                name: "深圳",
                value: 92
              },
              {
                name: "湖北",
                value: 810
              },
              {
                name: "四川",
                value: 453
              }
            ]
          }
        ]
      });
      window.addEventListener("resize",()=>{
         myChart.resize();
      });
    },
    scoringUser() {
      let pfUser = echarts.init(this.$refs.pfUser); //这里是为了获得容器所在位置
      //window.onresize = pfUser.resize;
      let option = {
        title: {
          text: "进件趋势"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["评分用户准入进件"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["10.1", "10.2", "10.3", "10.4", "10.5", "10.6", "10.7"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "评分用户准入进件",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      };
      pfUser.setOption(option);
      window.addEventListener("resize",()=>{
        pfUser.resize();
      });
    },
    specificIndex() {
      let specificIndex = echarts.init(this.$refs.specificIndex); //这里是为了获得容器所在位置
      window.onresize = specificIndex.resize;
      let option = {
        title: {
          text: "特定指标"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["智策接口", "智策缺失", "群星接口", "群星缺失"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["10.1", "10.2", "10.3", "10.4", "10.5", "10.6", "10.7"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "智策接口",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "智策缺失",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "群星接口",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "群星缺失",
            type: "line",
            stack: "总量",
            areaStyle: { normal: {} },
            data: [320, 332, 301, 334, 390, 330, 320]
          }
        ]
      };
      specificIndex.setOption(option);
      window.addEventListener("resize",()=>{
        specificIndex.resize();
      });
    },
    load () {
        let obj = new Object();
        obj.name = "告警"
         obj.value = "111"
         this.alarms.push(obj);
      }
  }
};
</script>
<style lang="scss" scoped>
.left {
  float: left;
  width: 20%;
}
.echarts {
  float: left;
  width: 60%;
}
.right {
  float: right;
  width: 20%;
}
.footer {
  margin-top: 30px;
}
.left_today{
  margin-top: 20px;
  border: 1px solid slategray;
  padding: 20px 10px 30px 10px;
}
.left_interface{
  margin-top: 20px;  
  border: 1px solid slategray;
  padding: 20px 10px 30px 10px;
}
.left_today  > .el-row{
   margin-top: 10px;
  border: 1px solid slategray;
  padding: 10px 5px 10px 5px;
  border-radius:5px;
}
.left_interface > .el-row{
   margin-top: 10px;
  border: 1px solid slategray;
  padding: 10px 5px 10px 5px;
  border-radius:5px;
}
.right_alarm{
  margin-top: 20px;  
  border: 1px solid slategray;
  padding: 20px 10px 30px 10px;
}
.right_alarm .el-row{
  margin-top: 10px;
  border: 1px solid slategray;
  padding: 10px 5px 10px 5px;
  border-radius:5px;
}
.infinite-list{
  height: 350px;
}
</style>
